<template>
    <div id="map_contianer">
        <!-- 高德地图容器 -->
        <div ref="mapRef" id="map_container"></div>
    </div>
</template>

<script setup>
import { load } from '@amap/amap-jsapi-loader'
import { ref, onMounted, reactive, watch } from 'vue'
import { useInfoStore } from '../stores/info'

const info = useInfoStore();

watch(
    () => info.selectFlag,
    (newValue, oldValue) => {
        // 监听到变化，说明省市填写完毕，查询地理坐标
        selectLnglat()
    }
)

// 对应地图渲染的 ref 元素 <div ref="mapRef" />
const mapRef = ref()

// 配置key和密钥
const mapApiKey = reactive({
    securityJsCode: import.meta.env.VITE_APP_AMAP_SECURITY_JS_CODE,
    key: import.meta.env.VITE_APP_AMAP_API_KEY
})

// 地图对象
const map = ref()
let mapO = {};

let centerLnglat = ref([109.428071, 24.326442]);

const initMapView = async () => {
    try {
        window._AMapSecurityConfig = {
            securityJsCode: mapApiKey.securityJsCode
        }
        // 给map赋予操作构造器
        map.value = await load({
            key: mapApiKey.key,
            version: '2.0',  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
        // 获取地图对象
        mapO = new map.value.Map(mapRef.value, {
            viewMode: '3D', // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: centerLnglat.value, // 中心地理坐标
            resizeEnable: true
        })

        // 添加点击事件

        mapO.on('click', OnPoint)
    } catch (error) {
        console.log(error)
    }
}

// 地图点击处理器
function OnPoint(e) {
    // 获取点击位置的经纬度
    const { lng, lat } = e.lnglat;

    // 处理坐标偏移问题
    const pixel = mapO.lngLatToContainer(e.lnglat); // 获取地图的像素坐标
    const offset = new map.value.Pixel(-2, -12);// 图标的偏移量（根据图标的实际大小来设置）
    // 计算新的像素坐标
    const newPixel = new map.value.Pixel(pixel.getX() + offset.getX(), pixel.getY() + offset.getY());
    // 将新的像素坐标转换为经纬度
    const newLngLat = mapO.containerToLngLat(newPixel);

    console.log(newLngLat, "====");

    // 创建标记点
    const marker = new map.value.Marker({
        position: newLngLat, // 使用调整后的经纬度位置，标记点图标显示位置
        title: '标记点', // 鼠标悬停时显示的文字
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义标记图标 URL（可选）
        offset: offset // 偏移量
    });

    // 将标记点添加到地图上
    marker.setMap(mapO);

    // 使用经纬度查询出详细地址（逆地理查询）
    getDetailAddress(newLngLat.lng, newLngLat.lat);
    // 将地理坐标存储，先纬度后经度，因为es存储String类型的地理坐标相反
    info.setLatlng(newLngLat.lat+","+newLngLat.lng);
    // 输出经纬度坐标
    console.log("点击经纬度:", lng, lat);
    console.log("调整后的经纬度:", newLngLat.lat, newLngLat.lng);

}

// 根据经纬度坐标获取详细地址
function getDetailAddress(lng, lat) {
    map.value.plugin('AMap.Geocoder', function () {
        var geocoder = new map.value.Geocoder({
            city: info.address
        })
        // 构造坐标参数数组
        let agrsPotin = [lng, lat];
        geocoder.getAddress(agrsPotin, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // 将详细地址存入pinia中，在表单组件中取出展示
                info.setDetailAddress(result.regeocode.formattedAddress)
            } else {
                console.log("获取地址失败,", status);
            }
        })
    })
}


function selectLnglat() {
    map.value.plugin('AMap.Geocoder', function () {
        var geocoder = new map.value.Geocoder({
            city: info.address
        })
        geocoder.getLocation(info.address, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // result中对应详细地理坐标信息,将地图赋予新地理中心点重载地图
                centerLnglat.value[0] = result.geocodes[0].location.lng;
                centerLnglat.value[1] = result.geocodes[0].location.lat;
                initMapView();
                console.log(result);
            } else {
                console.log(status);
            }
        })
    })
}

onMounted(() => {
    initMapView()
})

</script>

<style scoped>
#map_container {
    width: 100%;
    height: 200px;
}
</style>